<template>
<div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="收到" name="toMsg">
        <ToMsg ref="toMsg"></ToMsg>
    </el-tab-pane>
    <el-tab-pane label="回复" name="formMsg">
        <FormMsg ref="formMsg"></FormMsg>
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script setup>
import { nextTick, ref,watch } from 'vue';
import ToMsg from './ToMsg.vue';
import FormMsg from './formMsg.vue';
const activeName = ref('toMsg')
const userInfo=ref(null);
const toMsg=ref(null);
const formMsg=ref(null);
//监听 toMsg 组件
watch(toMsg, (newVal, oldVal) => {
  if (newVal) {
    toMsg.value.setFormUid(userInfo.value.friendUid);
  }
})
//监听 formMsg 组件
watch(formMsg, (newVal, oldVal) => {
  if (newVal) {
    formMsg.value.setToUid(userInfo.value.friendUid);
  }
})
const handleClick = (tab, event) => {
  console.log(tab, event)
}
//设置用户信息
const setUserInfo=(data)=>{
    userInfo.value=data;
    if(formMsg.value){
        formMsg.value.setToUid(userInfo.value.friendUid);
    }
    if(toMsg.value){
        toMsg.value.setFormUid(userInfo.value.friendUid);
    }
}
// 暴露方法给父组件
defineExpose({
    setUserInfo
})
</script>
<style>

</style>